<template>
	<view class="page">
		<view class="logo">
			<image :src="logoPng" mode=""></image>
		</view>
		<!-- 填写区 -->
		<view class="input-info">
			<view class="info">
				<!-- 手机号前缀选择 -->
				<view class="phone-prefix">
					<picker mode="selector" :range="prefixList" @change="onPrefixChange">
						<view class="picker">+{{ selectedPrefix }}</view>
					</picker>
				</view>
				<input type="tel" v-model="form.tel" maxlength="11" placeholder="手机号">
				<view class="more"></view>
			</view>
			<view class="info">
				<input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
				<view class="more">
					<text class="mo" @click="getPhoneCode">{{btnValue}}</text>
					<text class="mo" style="display: none">{{second}}秒后重试</text>
				</view>
			</view>
			<view class="info">
				<input :password='!isPassword' maxlength="26" v-model="form.passwd" placeholder="请输入密码">
				<view class="more">
					<text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'"
						@click="isPassword = !isPassword"></text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-info">
			<view class="btn" :style="isRegister?'opacity:1':'opacity:0.4'" @click="isRegister?onRegister():''">
				<text>注册</text>
			</view>
		</view>
		<!-- 操作 -->
		<view class="operation">
			<text></text>
			<text @click="onLogin">已有账号?登录</text>
		</view>
	</view>
</template>

<script>
	import {
		sendSmsCode,
		registerUser
	} from '@/api/user/userApi.js';
	import conf from '@/conf/config.js';
	export default {
		data() {
			return {
				logoPng: conf.commonBaseUrl + 'h5/static/logo.png',
				isPassword: false,
				isRegister: false,
				codeMsg: "",
				second: 60,
				btnValue: '获取验证码',
				// 表单
				form: {
					tel: '',
					code: '',
					passwd: '',
				},
				prefixList: ['86', '853', '852'], // 前缀列表
				selectedPrefix: '86', // 默认选择的前缀
			};
		},
		methods: {
			onLogin() {
				uni.redirectTo({
					url: '/pages/public/login'
				})
			},
			// 获取验证码
			getPhoneCode: function() {
				let _that = this;
				if (!this.form.tel) {
					this.vc.toast({
						icon: 'none',
						title: '请先填写手机号'
					});
					return;
				}
				// 拼接前缀和手机号
				let phoneNumber = this.selectedPrefix + this.form.tel;
				sendSmsCode(phoneNumber, this)
					.then(_data => {
						_that.codeMsg = _data.data;
						// 开始倒计时
						_that.startCountdown();
					})
			},
			// 注册
			onRegister() {
				let that = this;
				// 拼接前缀和手机号
				let phoneNumber = this.selectedPrefix + this.form.tel;
				registerUser({
						...this.form,
						tel: phoneNumber
					})
					.then(_data => {
						uni.redirectTo({
							url: '/pages/public/login'
						})
					}, err => {
						uni.showToast({
							icon: 'none',
							title: err,
							duration: 5000
						});
					})
			},
			// 选择前缀
			onPrefixChange(e) {
				this.selectedPrefix = this.prefixList[e.detail.value];
			},
			// 倒计时
			startCountdown() {
				let _that = this;
				_that.btnValue = `${_that.second}秒后重试`;
				_that.btnDisabled = true;
				let timer = setInterval(() => {
					_that.second--;
					_that.btnValue = `${_that.second}秒后重试`;
					if (_that.second <= 0) {
						clearInterval(timer);
						_that.btnValue = '获取验证码';
						_that.btnDisabled = false;
						_that.second = 60;
					}
				}, 1000);
			}
		},
		watch: {
			form: {
				handler(newValue, oldValue) {
					if (newValue.tel && newValue.code && newValue.passwd) {
						this.isRegister = true;
					} else {
						this.isRegister = false;
					}
				},
				deep: true
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'register.scss';

	.phone-prefix {
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.picker {
		padding: 5px 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f9f9f9;
	}
</style>